<template>
    <div class="my">
     <div class="top"> 
         <div class="left"><span></span></div>
         <div class="center">我的京东</div>
         <div class="right"><span></span></div>
         </div>
     <div class="nr">
        <div class="user">
            <div class="user_nr">
<div class="user_top">
<div class="user_top_l"><img src="https://img11.360buyimg.com/jdphoto/s120x120_jfs/t21160/90/706848746/2813/d1060df5/5b163ef9N4a3d7aa6.png" alt="" srcset=""></div>
<div class="user_top_r">
{{user}}
</div>
</div>
<div class="user_top_b">
    <ul>
        <li>
            <div class="li_t">0</div>
            <div class="li_b">商品收藏</div>
        </li>
         <li>
            <div class="li_t">0</div>
            <div class="li_b">店铺收藏</div>
        </li> <li>
            <div class="li_t">0</div>
            <div class="li_b">我的足迹</div>
        </li>
    </ul>
</div>
            </div>
        </div>
        <div class="nr_b">
            <div class="nr_fk">
              
               <li>
       <div class="li_t"><span></span></div>
            <div class="li_b">待付款</div>
                    </li>   <li>
       <div class="li_t"><span></span></div>
            <div class="li_b">待收货</div>
                    </li>   <li>
       <div class="li_t"><span></span></div>
            <div class="li_b">退换/售后</div>
                    </li>   <li>
       <div class="li_t"><span></span></div>
            <div class="li_b">全部订单</div>
                    </li>
                  
        
            </div>
            <div class="nr_yk">
                   <li>
       <div class="li_t">0</div>
            <div class="li_b">优惠券</div>
                    </li>   <li>
       <div class="li_t" style=" font-size: .32rem;">开通有礼</div>
            <div class="li_b">白条</div>
                    </li>   <li>
       <div class="li_t">555</div>
            <div class="li_b">京豆</div>
                    </li>   <li>
       <div class="li_t">0</div>
            <div class="li_b">红包</div>
                    </li>
                    <li>
       <div class="li_t"><span></span></div>
            <div class="li_b">我的资产</div>
                    </li>
            </div>
            <div class="nr_fw">
                <div class="title">工具与服务</div>
                <ul>
                    <li><div class="li_t"><span></span></div>
                    <div class="li_b">客户服务</div></li>
                    <li><div class="li_t"><span></span></div>
                    <div class="li_b">我的预约</div></li> <li><div class="li_t"><span></span></div>
                    <div class="li_b">我的问答</div></li> <li><div class="li_t"><span></span></div>
                    <div class="li_b">闲置换钱</div></li> <li><div class="li_t"><span></span></div>
                    <div class="li_b">高价回收</div></li>
                </ul>
          
            </div>
                  <div class="list">
<ul>
    <li v-for="(item,index) in list" :key="index">
<div class="cover">
    
<img :src="img+item.img+img1"> <!----> <!----></div>
<div class="info">
    <div class="rec_name"><!----> 
                           {{item.t}}
                        </div> <div class="flex_wrap">
                            <div class="price_info">
                            <div class="price">¥
                            <em>  {{item.jp/100}}</em></div> </div>
                            </div>
                            </div>
    </li>
    <li></li>
    </ul> 
     <div class="dibu">
         <ul>
             <li><a href="">{{user}}</a></li>
             <li><a @click="back()">退出</a> </li>
             <li><a href="">客户服务</a> </li>
             <li><a href=""> 返回顶部</a></li>
         </ul>
     </div>
       </div>
        </div>
     </div>
     
    </div>
</template>
<script>
import {carte_list} from '../../api/index';
import axios from 'axios'
export default {
    data() {
        return {
            user:"",
            list:"",
           img:"https://m.360buyimg.com/mobilecms/s150x150_",
           img1:"!q70.jpg.dpg"
        }
    },
    methods:{
back(){
    localStorage.removeItem('login')
 localStorage.removeItem('user')
location. reload()

}
    },
    mounted() {
      this.user=  localStorage.getItem('user')
        carte_list().then(res=>{
      
         this.list=res.data
        //   console.log(this.list);
     })
    },
    updated() {
        
    },
    deactivated() {
        
    },
}
</script>
<style  scoped>
    .my{
        width: 10rem;
        background: yellowgreen;
        /* height: 1000px; */
position: relative;

    }
    .top{
        height: 1.2rem;
        width: 10rem;
        background: white;
        position: relative;
    }
    .left{
        width: 1.066667rem;
        height: 1.2rem;
        background: white;
       position: absolute;
       left: 0;
    }
    .left span{
 width: .533333rem;
    height: .666667rem;
    display: inline-block;
    background: url() no-repeat 50%;
    background-position:.133333rem -0.053333rem;
    background-size: contain;
        position: absolute;
    top: .373333rem;
    }
    .center{
       left: 1.066667rem;
       right: 1.066667rem;
       top: 0;
bottom: 0;
text-align: center;
line-height:1.2rem;
font-size: .48rem;
        background: white;
        position: absolute;
    }
    .right{
        width: 1.066667rem;
        height: 1.2rem;
        background: white;  
         position: absolute;right: 0;
    }
    .right span{
            display: inline-block;
    margin: .32rem .16rem .32rem .266667rem;
    width: .533333rem;
    height: .533333rem;
    background: url() no-repeat 50%;
    background-size: .533333rem;
    }
    .nr{
        width: 10rem;
        height: auto;
      
    }
    .user{
        position: relative;
    overflow: hidden;
    width: 100%;
    background: url(https://img12.360buyimg.com/img/s1500x886_jfs/t1/115726/22/13102/240974/5f18fb83Ee40e230b/d4f2a67087fd443a.png) no-repeat scroll 0 0/cover;
    box-sizing: border-box;
    padding-top: 12px;
    padding-bottom: 10px;
    color: #fff;
    height: 5.066667rem;
    }
    .user_nr{
         height: 5.066667rem;
         width: 10rem;
         /* background: green; */
    }
    .user_top{
        width: 10rem;
        height: 1.866667rem;
        padding: 0 0 .48rem .48rem;
        box-sizing: border-box;
       
    }
    .user_top_l{
        width: 1.333333rem;
        height: 1.333333rem;
        position: relative;
         float: left;
    }
    .user_top_l img{
        width: 1.333333rem;
        height: 1.333333rem;
        display: inline-block;
        position: absolute;
    }
    .user_top_r{
        margin-left: 1.733333rem;
        font-size: .533333rem;
        line-height:  1.333333rem;
    }
    .user_top_b{
        width: 10rem;
        height: 1.333333rem;
        padding: 0 .373333rem;
        
    }
     .user_top_b li{
         width: 3.066667rem;
         height: 1.333333rem;
        ;float: left;
     }
      .user_top_b li .li_t{
  width: 3.066667rem;
  height: .426667rem;

   font-size: .426667rem;
   text-align: center;
   line-height: .426667rem;
      }
       .user_top_b li .li_b{
  width: 3.066667rem;
  height: .906667rem;
   font-size: .32rem;
   text-align: center;
   line-height: .906667rem;;
      }
      .nr_b{
          background:rgb(247, 247, 247);
          position: absolute;
            top: 5.386667rem;
             border-radius: .4rem .4rem 0 0;
      }
      .nr_fk{
          width: 10rem;
          height: 2.133333rem;
          margin: .4rem 0;
          padding: 0 .373333rem;
          background: white;
              border-radius: .4rem .4rem 0 0;
      }
      .nr_fk li{
          height: 1.36rem;
          width:2.293333rem;
          background: white;
          padding: .453333rem 0 .266667rem;
          float: left;
      }
      .nr_fk .li_t{
          height: .533333rem;
          width: 1.84rem;
          line-height: .533333rem;
           font-size: .506667rem;
           text-align: center;
           text-align: center;

      }
      .nr_fk .li_b{
          height: .373333rem;
          width: 1.84rem;
           font-size: .32rem;
          
           line-height:.373333rem ;
           text-align: center;
           margin: .426667rem 0 0;
      }
      .nr_fk li:nth-child(1) span{
          
        background: url(https://img12.360buyimg.com/img/s60x60_jfs/t1/125209/17/7530/933/5f16524bE43b4a5f7/71971b102d1fcbc5.png) no-repeat scroll 50%/26px;
    background-size: 25px auto;
    display: inline-block;
    height: 1.84rem;
    width: 1.84rem;

    margin-top: -0.693333rem;
      }
         .nr_fk li:nth-child(2) span{
          
      background: url(https://img12.360buyimg.com/img/s120x120_jfs/t1/123660/33/7797/4674/5f1804aeE308173db/b392f9ce63eb8490.png) no-repeat scroll 50%/26px;
    background-size: 25px auto;
    display: inline-block;
    height: 1.84rem;
    width: 1.84rem;

    margin-top: -0.693333rem;
      }
         .nr_fk li:nth-child(3) span{
          
          background: url(https://img12.360buyimg.com/img/s60x60_jfs/t1/120478/38/7592/2211/5f165256E02190e99/1491d4cb340074bb.png) no-repeat scroll 50%/26px;
    background-size: 25px auto;
    display: inline-block;
    height: 1.84rem;
    width: 1.84rem;

    margin-top: -0.693333rem;
      }
         .nr_fk li:nth-child(4) span{
          
      background: url(https://img12.360buyimg.com/img/s60x60_jfs/t1/145618/2/3439/692/5f16525eE30cd2db1/3ab434ec2686a256.png) no-repeat scroll 50%/26px;
    background-size: 25px auto;
    display: inline-block;
    height: 1.84rem;
    width: 1.84rem;

    margin-top: -0.693333rem;
      }
      .nr_yk {
            width: 10rem;
          height: 2.133333rem;
          margin: .4rem 0;
          padding: 0 .373333rem;
          background: white;
      }
       .nr_yk li{
             width: 1.84rem;
          height:2.133333rem;
          background: white;
          padding: .453333rem 0 .266667rem;
          float: left;
       }
       .nr_yk .li_t{
          height: .533333rem;
          width: 1.84rem;
          line-height: .533333rem;
           font-size: .506667rem;
           text-align: center;
           text-align: center;

      }
      .nr_yk .li_b{
          height: .373333rem;
          width: 1.84rem;
           font-size: .32rem;
           line-height:.373333rem ;
           text-align: center;
           margin: .426667rem 0 0;
      }
       .nr_yk li:nth-child(5) span{
      background: url(https://img12.360buyimg.com/img/s60x62_jfs/t1/124603/26/7654/1293/5f16621fE5203989a/ac40297eb801ec8d.png) no-repeat 50% scroll;
    background-size: 25px auto;
    display: inline-block;
    height: 1.84rem;
    width: 1.84rem;

    margin-top: -0.693333rem;
      }
      .nr_fw{
          height: 5.226667rem;
          width: 10rem;
            background: white;
    margin: 15px 0;
    border-radius: 15px;
      }
      .nr_fw .title{
          height: 1.013333rem;
          width: 10rem;
          background: white;
          padding: 0 0 0 .48rem;
          font-size: .373333rem;
          line-height: 1.013333rem;
          color: #2D2E2E;
          font-weight: 700;
      }
      .nr_fw li{
          width: 2.48rem;
          height: 1.946667rem;
          background:white;
          padding: .32rem 0 0;
          float: left;
          /* line-height: 1.946667rem; */
          text-align: center;
      }
        .nr_fw li:nth-child(1) span{
          
     background: url(//img12.360buyimg.com/img/s70x70_jfs/t1/135809/4/7014/5528/5f35369dE8aff3fab/f4b952a87ea33ae4.png.webp) 0px 0px / 100% 100% no-repeat;
    background-size: 25px auto;
    display: inline-block;
    height: .933333rem;
    width: .933333rem;

   margin: 0 .784rem .16rem;
      }
          .nr_fw li:nth-child(2) span{
          
    background: url(//img12.360buyimg.com/img/s70x70_jfs/t1/143427/38/5400/4413/5f350384Edba4458b/bfcb210d2110a7d8.png.webp) 0px 0px / 100% 100% no-repeat;
    background-size: 25px auto;
    display: inline-block;
    height: .933333rem;
    width: .933333rem;

   margin: 0 .784rem .16rem;
      }
          .nr_fw li:nth-child(3) span{
          
        background: url(//img12.360buyimg.com/img/s70x70_jfs/t1/138657/15/5351/5178/5f3504ceE3707cfd0/bc8ff48c8edcc5b1.png.webp) 0px 0px / 100% 100% no-repeat;
    background-size: 25px auto;
    display: inline-block;
    height: .933333rem;
    width: .933333rem;

   margin: 0 .784rem .16rem;
      }
          .nr_fw li:nth-child(4) span{
    background: url(//img12.360buyimg.com/img/s70x70_jfs/t1/112188/32/14787/4956/5f3509edE376c2ddb/d716c6822cafa2b6.png.webp) 0px 0px / 100% 100% no-repeat;
    background-size: 25px auto;
    display: inline-block;
    height: .933333rem;
    width: .933333rem;

   margin: 0 .784rem .16rem;
      }
          .nr_fw li:nth-child(5) span{
          
    background: url(//img12.360buyimg.com/img/s70x70_jfs/t1/126073/34/9502/6741/5f350800Ee00c0d35/43485badf62439e9.png.webp) 0px 0px / 100% 100% no-repeat;
    background-size: 25px auto;
    display: inline-block;
    height: .933333rem;
    width: .933333rem;

   margin: 0 .784rem .16rem;
      }
      .nr_fw .li_b{
          font-size: .32rem;
          margin-top: -0.453333rem;
      }
      .list li{

float: left;
    background: #fff;
    position: relative;
    width: 50%;
    margin-bottom: 1px;
    padding: 15px 15px 0;
    box-sizing: border-box;
    border-radius: 10px;
}
.cover{
        position: relative;
    overflow: hidden;
    padding-top: 100%;
    height: 0;
}
.cover img{
        position: absolute;
    max-width: 100%;
    max-height: 100%;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);

}
 .rec_name {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
        margin: 12px 0 4px;
    font-size: 12px;
    color: #333;
    line-height: 18px;
    height: 36px;
    -webkit-box-orient: vertical}
    .price{
            display: inline-block;
   font-size: .64rem;
    color: #e93b3d;
    margin-right: 3px;
    line-height: 20px;
    }
    .dibu{
      width: 10rem;
    height: 5.666667rem;
    /* background: red; */
    position: absolute;
    bottom: -4.186667rem;
    }
    .dibu li{
            float: left;
    text-align: center;
    width: 25%;
    overflow: hidden;
    height: 1.541333rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding: 0 5px;
    line-height: 1.541333rem;
    box-sizing: border-box;
    /* background: brown; */
    text-align: center;
    }
    .dibu ul{
      display: inline-block;
    /* margin-left: 24px; */
    margin-top: 50px;
    border: 1px solid;
    width: 10rem;
    }
    .dibu li a{
            position: relative;
    display: block;
    box-sizing: border-box;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #848689;
    font-size: 3.73333vw;
    padding-top: 3px;
    }
</style>